<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status" :style="{ color: color }">
          {{ logisticsStatus }}
        </div>
        <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
        <div class="logistics-no">{{ orderInfo.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list" v-if="showDetail">
      <li v-for="(item, index) in orderInfo.logisticsInfo" :key="index">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button v-checkDetail>查看物流详情</button>
  </div>
</template>

<script>
export default {
  props: {
    orderInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      colorList: [
        { logisticsStatus: 0, color: '#333' },
        { logisticsStatus: 1, color: 'green' },
        { logisticsStatus: 2, color: 'red' },
        { logisticsStatus: 3, color: 'blue' },
      ],
      showDetail: false,
    }
  },
  computed: {
    // 判断颜色
    color() {
      let color = ''
      this.colorList.forEach((item) => {
        // console.log(this.orderInfo.logisticsStatus)
        if (item.logisticsStatus === this.orderInfo.logisticsStatus) {
          color = item.color
        }
      })
      return color
    },
    // 判断发货状态
    logisticsStatus() {
      if (this.orderInfo.logisticsStatus === 0) {
        return '未发货'
      } else if (this.orderInfo.logisticsStatus === 1) {
        return '已发货'
      } else if (this.orderInfo.logisticsStatus === 2) {
        return '已签收'
      } else return '未签收'
    },
  },
  directives: {
    checkDetail: {
      inserted(el, binding, str) {
        // 打印this为undefined
        // console.log(str.context)  打印出 VueComponent
        // console.log(str.context.orderInfo.role)
        let role = str.context.orderInfo.role
        // 判断role的值，如果不符合三个条件，button按钮禁用
        if (role !== 'admin' && role !== 'zhangsan' && role !== 'lisi') {
          el.disabled = true
        } else {
          el.disabled = false
          el.addEventListener('click', () => {
            // console.log(e)
            // console.log(str.context.showDetail)
            str.context.showDetail = true
          })
        }
      },
    },
  },
}
</script>

<style></style>
